<template>
  <div style=" background-color: #F5F6FA;">
    <!-- <hear></hear> -->
    <BDhear :num="3"></BDhear>
    <div style="background-color: #ffffff;">
      <div class="Submission_box">
        <div
          @click.stop="Stop()"
          class="Submission_box_details"
          v-for="(item, index) in SubList"
          :key="index"
        >
          <div class="Sub_hear">
            <div class="Sub_hear_img">
              <img src="../../assets/BidSecurity/Subformat.png" />
            </div>
            <div
              style="font-size:19px;color:#333;margin-left:32px ;font-weight: Bold;"
            >{{ item.name }}</div>
          </div>
          <div class="Sub_btn">
            <el-button style="width:80%;height:53px" @click.stop="SubSee(item.name)">点击上传</el-button>
          </div>
          <div class="Sub_format">格式为：.doc .docx .pdf .jpg...</div>
        </div>
        <div class="fl Sub_footer_btn">
          <div>
            <el-button @click="Institution" style="width:175px;height:60px">上一步</el-button>
          </div>
          <div>
            <el-button
              @click="bidFrom"
              style="width:175px;height:60px;margin-left: 20px;"
              type="primary"
            >下一步</el-button>
          </div>
        </div>
      </div>
      <el-dialog :title="title" :visible.sync="statis" width="30%" center>
        {{params}}
        <div v-if="title=='开户许可证'" style="upload_box">
          <el-upload
            name="image"
            class="avatar-uploader"
            action="https://agent.hnzyxsbh.com/api/baohan/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="params.khxkz" :src="this.$baseUrl + params.khxkz" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div v-if="title=='公司章程'" style="upload_box">
          <el-upload
            name="image"
            class="avatar-uploader"
            action="https://agent.hnzyxsbh.com/api/baohan/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="params.gszc" :src="this.$baseUrl + params.gszc" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div v-if="title=='审计报告'" style="upload_box">
          <el-upload
            name="image"
            class="avatar-uploader"
            action="https://agent.hnzyxsbh.com/api/baohan/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="params.sjbg" :src=" this.$baseUrl + params.sjbg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div v-if="title=='招标文件'" style="upload_box">
          <el-upload
            name="image"
            class="avatar-uploader"
            action="https://agent.hnzyxsbh.com/api/baohan/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="params.zbwj" :src="this.$baseUrl+params.zbwj" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div v-if="title=='中标通知书'" style="upload_box">
          <el-upload
            name="image"
            class="avatar-uploader"
            action="https://agent.hnzyxsbh.com/api/baohan/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="params.zbtzs" :src="this.$baseUrl+params.zbtzs" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div v-if="title=='合同文件'" style="upload_box">
          <el-upload
            name="image"
            class="avatar-uploader"
            action="https://agent.hnzyxsbh.com/api/baohan/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="params.sght" :src="this.$baseUrl+params.sght" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div v-if="title=='保函格式'" style="upload_box">
          <el-upload
            name="image"
            class="avatar-uploader"
            action="https://agent.hnzyxsbh.com/api/baohan/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="params.bhgs" :src="this.$baseUrl+params.bhgs" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="statis = false">重新上传</el-button>
          <el-button type="primary" @click="statis = false">完成</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import hear from "../../components/hear.vue";
import BDhear from "./BDhear.vue";
import { datatijiao } from "@/api/submission";
export default {
  components: {
    // hear,
    BDhear
  },
  name: "Submission",
  data() {
    return {
      // 上传证书
      // 开户许可证
      params: {
        khxkz: "",
        gszc: "",
        sjbg: "",
        zbwj: "",
        zbtzs: "",
        sght: "",
        bhgs: ""
      },
      title: "",
      statis: false,
      SubList: [
        {
          name: "开户许可证"
        },
        {
          name: "公司章程"
        },
        {
          name: "审计报告"
        },
        {
          name: "招标文件"
        },
        {
          name: "中标通知书"
        },
        {
          name: "合同文件"
        },
        {
          name: "保函格式"
        },
        {
          name: "开户许可证"
        }
      ]
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (this.title == "开户许可证") {
        this.params.khxkz = res.data;
      } else if (this.title == "公司章程") {
        this.params.gszc = res.data;
      } else if (this.title == "招标文件") {
        this.params.zbwj = res.data;
      } else if (this.title == "中标通知书") {
        this.params.zbtzs = res.data;
      } else if (this.title == "合同文件") {
        this.params.sght = res.data;
      } else if (this.title == "保函格式") {
        this.params.bhgs = res.data;
      } else if (this.title == "审计报告") {
        this.params.sjbg = res.data;
      }
    },
    beforeAvatarUpload(file) {},
    SubSee(title) {
      this.title = title;
      this.statis = true;
    },
    Stop() {
      this.statis = false;
    },
    Institution() {
      this.$router.push("/BidSecurity/financialInstitution");
    },
    bidFrom() {
      this.params.guarantee_apply_id = sessionStorage.getItem(
        "guarantee_apply_id"
      );
      // this.params.user_id = sessionStorage.getItem("user_id");
      datatijiao(this.params).then(res => {
        if (res.data.code == 1) {
          this.$message.success('提交成功')
          //  this.$router.push("/BidSecurity/SelectALot");
          this.$router.push("/BidSecurity/bidFrom");
        }
      });
    }
  }
};
</script>

<style scoped>
.upload_box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.Sub_popper_btn {
  position: relative;
  left: 27%;
  top: 20%;
}
::v-deep.el-dialog__header {
  background: #1795ff !important;
}
.Sub_CoItn_img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog--center {
  text-align: left !important;
}
.Sub_CoItn_img img {
  width: 253px;
  height: 253px;
}

.Sub_footer_btn {
  margin: 50px auto;
  display: flex;
}

.Sub_cancel {
  width: 13.52px;
  height: 13.52px;
  font-size: 23.52px;
  color: #ffffff;
  margin-right: 30px;
  padding-bottom: 20px;
}

.sub_poper_hear {
  width: 718px;
  height: 59px;
  background-color: #1795ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub_poper {
  width: 718px;
  height: 562px;
  border: 1px solid #e7e7e7;
  position: relative;
  bottom: 72%;
  left: 30%;
  background-color: #ffffff;

  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.09);
}

.Sub_format {
  font-size: 16px;
  font-weight: Regular;
  color: rgba(0, 0, 0, 0.45);
  position: relative;
  left: 10%;
  top: 40%;
}

.Sub_btn {
  position: relative;
  left: 9%;
  top: 36%;
}

.Sub_hear {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  padding-top: 25px;
  margin-left: 28px;
}

.Sub_hear_img {
  width: 48px;
  height: 48px;
}

.Submission_box_details {
  margin-bottom: 20px;
  width: 23%;
  height: 285.51px;
  border-radius: 4px;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
}

.Submission_box {
  /* position: relative;
  left: 10%;
  top: 2%; */
  padding: 3% 5%;
  padding-bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
